<template>
  <div class="home">
    <!-- 顶部 -->
    <div class="top">
      <div class="top_left"></div>
      <van-search
        class="seatch"
        shape="round"
        v-model="keyword"
        placeholder="请输入搜索关键词"
        @click="goMenu"
      />
      <div class="top_right">
        <van-icon name="location-o" size="25" color="#777" />
      </div>
      <!-- <div class="seachbox">
          <div v-for="(t,i) in search" :key="i">{{t}}</div>
      </div> -->
    </div>

    <!-- 轮播图 -->
    <div class="slideshow-box">
      <van-swipe :autoplay="3000" class="slideshow" @change="changeActiveIndex">
        <van-swipe-item v-for="(item, i) in bannersData" :key="i">
          <img
            :src="item.bannerImg"
            class="auto-img"
            @click="goDetails(item.pid)"
          />
        </van-swipe-item>
        <template #indicator>
          <div class="dot-box">
            <div
              class="dot"
              v-for="(d, i) in bannersData.length"
              :key="i"
              :class="{ active: activeIndex === i }"
            ></div>
          </div>
        </template>
      </van-swipe>
    </div>

    <!-- <div class="bg"></div> -->
    <!-- 内容 -->
    <div class="product-box">
      <div class="hot-top">
        <van-icon name="fire" />
        热 卖 推 荐
        <van-icon name="fire" />
      </div>
      <div
        class="product"
        v-for="(pro, i) in hotData"
        :key="i"
        :style="`backgroundImage:url(${pro.largeImg}) `"
        @click="goDetails(pro.pid)"
      >
        <div class="text-box">
          <div class="main">{{ pro.name }}</div>
          <div class="assistant">{{ pro.enname }}</div>
          <div class="p-price">￥{{ pro.price }}</div>
        </div>
        <!-- <div class="pay-box">购买</div> -->
        <i class="add"></i>
      </div>
    </div>
  </div>
</template>

<script>
import "../assets/less/home.less";
export default {
  name: "Home",
  data() {
    return {
      keyword: "", //搜索词
      activeIndex: 0, //轮播图下标
      bannersData: [], //轮播图数据
      hotData: [], //热卖推荐数据
      search: [], //搜索结果
      isShow: false, //是否显示搜索结果框
    };
  },
  created() {
    // 获取轮播图数据
    this.getBannersData();
    // 获取热卖推荐数据
    this.getHotData();
  },
  methods: {
    // 轮播图高亮切换
    changeActiveIndex(index) {
      this.activeIndex = index;
    },

    // 获取轮播图数据
    getBannersData() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        method: "get",
        url: this.baseUrl + "/banner",
        params: {
          appkey: this.appkey,
        },
      })
        .then((result) => {
          // console.log(result);
          this.$toast.clear();
          if (result.data.code === 300) {
            this.bannersData = result.data.result;
          } else {
            this.$toast({
              message: result.data.msg,
              forbidClick: true,
              duration: 3000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log(err);
        });
    },

    // 获取热卖推荐数据
    getHotData() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        method: "get",
        url: this.baseUrl + "/typeProducts",
        params: {
          appkey: this.appkey,
          key: "isHot",
          value: 1,
        },
      })
        .then((result) => {
          // console.log(result);
          this.$toast.clear();
          if (result.data.code === 500) {
            this.hotData = result.data.result;
          } else {
            this.$toast({
              message: result.data.msg,
              forbidClick: true,
              duration: 3000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log(err);
        });
    },

    // 点击跳转咖啡详情
    goDetails(pid) {
      this.$router.push({ name: "Details", params: { pid } });
    },

   

    // 跳转菜单
    goMenu(){
      this.$router.push({name : 'Menu'})
    }
  },
};
</script>


